<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #fff;
        }

        .staff {
            padding: 10px 0;
        }

        .staff img {
            margin: 0 10px;
            width: 50px;
            height: 50px;
            border-radius: 100px;
        }

        input[type="radio"] {

            display: none;
        }

        label {
            cursor: pointer;

            background: url(${pageContext.request.contextPath}/images/circle.png) no-repeat;
            width: 16px;
            height: 16px;

        }

        .radio-label:checked + label {
            background: url(${pageContext.request.contextPath}/images/draw.png) no-repeat;
        }

        .label_checked {
            background: url(${pageContext.request.contextPath}/images/draw.png) no-repeat;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">

    <h1 class="am-header-title">
        <a href="#title-link" class="">
            选择新装人员
        </a>
    </h1>
</header>
<form class="am-form" id="userlist">

    <div class="am-g" v-for="item in items">
        <div class="am-u-sm-12 staff">
            <img :src="item.avatar"> <span>{{item.username}}</span>
            <span style="float: right; line-height: 60px;padding-right: 10px;">
                    <input type="radio" :id="item.id" name="staff" :value="item.id" class="radio-label">
                    <label name="1" class=""></label>
                    </span>
        </div>
        <hr class="clearpadding clearmargin am-u-sm-12">
    </div>


</form>
<div align="center" data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " onclick="selectCom()">
    <img src="${pageContext.request.contextPath}/images/comfirm_select.png" style="width: 100%;">
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    var userlist;
    $(function () {
        $.ajax({
            type: "get",
            url: '${pageContext.request.contextPath}/clientUser/findWorker?type=3',
            dataType: 'json',
            success: function (data) {

                userlist = new Vue({
                    el: "#userlist",
                    data: {
                        items: data.obj
                    }
                });
                $(".staff").each(function () {
                    $(this).attr("for", $(this).prev().val());
                });
                $(".staff").click(function () {
                    $('input[type="radio"]').removeAttr('checked');
                    $('label').removeClass('label_checked');
                    $(this).find('input[type="radio"]').attr('checked', 'checked');
                    $(this).find('label').addClass('label_checked');
                });
            }

        });
    });

    function selectCom() {
        var id = $("input[type='radio'][checked]").val();
        if (id == "") {
            layer.msg("请选择新装人员");
            return;
        }
        var userId = {'userId': id};
        $.ajax({
            type: "post",
            data: userId,
            url: '${pageContext.request.contextPath}/clientHallOrder/accept',
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    window.location.href = "${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId=${acceptHallOrderId}"
                }else {
                    layer.msg(data.msg);
                }

            }

        });
    }
</script>
</body>

</html>
